/**
 * 获取元素
 */
 let qr = document.querySelector('.four .qr')
 let qr2 = document.querySelector('.four .qr2')

let four = document.querySelector('.four')

let five = document.querySelector('.five')


/**
 * 1.需求:悬停在 qr上,出现下滑二维码 qr2
 * 事件:mouseover mouseout
 */
// qr.addEventListener('mouseover',function(){
//     qr2.style.display = 'block'
//     qr2.closest('p').firstElementChild.style.transition = 'all 0.6s linear';

// })
// qr.addEventListener('mouseout',function(){
//     qr2.style.display = 'none'
// })




let data = [
    {"count": 4000, "price": 1200, "unitPrice": "0.3000"},
    {"count": 8000, "price": 2000,"unitPrice": "0.2500" },
    {"count": 40000, "price": 8000, "unitPrice": "0.2000" }
]


/**
 * 2.1需求:遍历data,把属性count组装成HTML代码,渲染到four里面(push)
 */

//封装
function rederData(){

    //定义变量保存组装好的数据
    let spanHtml = '';

    data.forEach(function(v,i){

        //console.log(v.count);
        //组装数据
        spanHtml += `<span  class="${i === 0 ? 'dj':''}" data-price=${v.price} data-unit-price=${v.unitPrice}>${v.count}次</span>`
    })
    // console.log(spanHtml);
    four.innerHTML += spanHtml;
    // four.push(spanHtml);

}
//调用封装函数
rederData();


/**
 * 2.2需求:点击次数 span ,增加样式 dj,渲染数据到第五排five
 */
//获取span
let span = document.querySelectorAll('.four span')
//  console.log(span);

let index = 0;
span.forEach(function (dom,i) {
    //console.log(dom);
    dom.addEventListener('click',function () {
        //console.log(dom.innerHTML);
        //删除上一个指定类名
        span[index].classList.remove('dj')
        //当前添加
        this.classList.add('dj')
 
        index = i;
        

        //console.log(dom.dataset.price);
        //console.log(dom.dataset.unitPrice);
        five.innerHTML = `<span>￥${dom.dataset.price}</span>(约${dom.dataset.unitPrice}元/次),仅限企业实名购买;`
    })


    
 })
 




 /**
  * 3.需求:插入canvas背景
  */
//配置
var config = {
    vx: 4,	//小球x轴速度,正为右，负为左
    vy: 4,	//小球y轴速度
    height: 2,	//小球高宽，其实为正方形，所以不宜太大
    width: 2,
    count: 150,		//点个数
    color: "#999", 	//点颜色
    stroke: "#999", 		//线条颜色
    dist: 6000, 	//点吸附距离
    e_dist: 20000, 	//鼠标吸附加速距离
    max_conn: 10 	//点到点最大连接数
}

//调用
CanvasParticle(config);














/**
 * 需求:点击 datails-nav 下的li 显示不同的内容
 * 
 */

let datailsNavLi = document.querySelectorAll('.datails-nav li')
let main = document.querySelector('.main')
let main1 = document.querySelector('.main .main1')
//console.log(main1);
let main2 = document.querySelector('.main .main2')
let main3 = document.querySelector('.main .main3')
let main4 = document.querySelector('.main .main4')
let main5 = document.querySelector('.main .main5')

//遍历
datailsNavLi.forEach(function(v,i){
    //console.log(v);
    datailsNavLi[0].addEventListener('click',function(){
        //console.log(1);
        v.className = ''
        this.className = 'APIwd'
        main.style.height = '1360px'
        main1.style.display= "block";
        main2.style.display= "block"
        main3.style.display= "block"
        main4.style.display= "block"
        main5.style.display= "none";
    })
    datailsNavLi[1].addEventListener('click',function(){
        //console.log(1);
        v.className = ''
        this.className = 'APIwd'
        main.style.height = '1070px'
        main1.style.display= "none"
        main2.style.display= "block"
        main3.style.display= "block"
        main4.style.display= "block"
        main5.style.display= "none"
    })
    datailsNavLi[2].addEventListener('click',function(){
        //console.log(1);
        v.className = ''
        this.className = 'APIwd'
        main.style.height = '860px'
        main1.style.display= "none"
        main2.style.display= "none"
        main3.style.display= "none"
        main4.style.display= "block"
        main5.style.display= "none"
    })
    datailsNavLi[3].addEventListener('click',function(){
        //console.log(1);
        
        v.className = ''
        this.className = 'APIwd'
        main.style.height = '860px'
        main1.style.display= "none"
        main2.style.display= "none"
        main3.style.display= "none"
        main4.style.display= "none"
        main5.style.display= "block"
    })
})

